import React, { Component, PropTypes } from 'react';
import {
  Text,
  View,
  ScrollView,
  StyleSheet,
  DeviceEventEmitter,
  Platform,
  Image,
  Animated,
  TouchableOpacity,
  Dimensions,
  NativeAppEventEmitter,
  InteractionManager
} from 'react-native';

import ScrollableTabView from 'react-native-scrollable-tab-view';

import ProgressBar from '../global/ProgressBar';
import DefaultTabBar from '../global/scrollableTabView/DefaultTabBar';
import Button from '../global/scrollableTabView/Button';

import OwnerList from './ownerList';
import OwnerListApprove from './ownerListApprove';
import styles from './ownerInfoStyle';
import api from '../../services/api';

const windowHeight = Dimensions.get('window').height;

class OwnerInfo extends Component {
    constructor(props) {
		super(props);

        this.heightTop = (windowHeight / 2) *(-1);

		this.state = {
			isLoading: true,
			isRefreshing: false,
			tab: 0,
            isShow: false,
            display: 'none',
            num: [0, 0]
		};

		// this._getTabHeight = this._getTabHeight.bind(this);
		this._onChangeTab = this._onChangeTab.bind(this);

		// this.props.navigator.setOnNavigatorEvent(this._onNavigatorEvent.bind(this));
	}
    componentWillMount() {
		// this._retrieveDetails();
	}

    componentDidMount(){
        this.getNotApprovedCount();

        let Emitter = Platform.OS === 'android' ? DeviceEventEmitter : NativeAppEventEmitter;
        this._subcribOwner = Emitter.addListener('owner.onload', this.onLoad.bind(this));
    }

    onLoad(){
        InteractionManager.runAfterInteractions(async() => {
            this._regListView && this._regListView.wrappedInstance.onLoad();
            this._notApproveListView && this._notApproveListView.wrappedInstance.onLoad();
        });
    }

    async getNotApprovedCount(){
        let res, arr = [0 , 0];
        res = await api.post('/housekeeper/notapprovedcount',{});
        if(res){
            arr[1] = res.data;
        }

        this.setState({ num : arr});
    }

    _onChangeTab({ i, ref }) {
		this.setState({ tab: i });
	}

    updateMarkNum(arr){
        this.setState({ num : arr});
    }

    // _onNavigatorEvent(event){
    //     if (event.type === 'ScreenChangedEvent') {
	// 		if (event.id === 'didAppear') {//出现时
    //
	// 		}
	// 	}
    // }

    componentWillUnmount(){
        this._subcribOwner && this._subcribOwner.remove();
    }

    _pressItem(){

    }

    _renderTab(name, page, isTabActive, onPressHandler) {
      const {textStyle, markStyle, markTextStyle, } = styles;
      const textColor = isTabActive ? '#EA5404' : '#555555';
      const fontWeight = isTabActive ? 'bold' : 'normal';
      const markDom = (this.state.num[page]?<View style={markStyle}><Text style={markTextStyle}>{this.state.num[page]>99?"99+":this.state.num[page]}</Text></View>:null);

      return <Button
        style={{flex: 1, }}
        key={name}
        accessible={true}
        accessibilityLabel={name}
        accessibilityTraits='button'
        onPress={() => onPressHandler(page)}
      >
        <View style={[{flex:1,alignItems: 'center',justifyContent: 'center',paddingBottom: 10}, this.props.tabStyle, ]}>
          <Text style={[textStyle, {color: textColor, fontWeight, }, ]}>
            {name}
          </Text>
          {markDom}
        </View>
      </Button>;
    }

    render() {
        return (
            <View style={styles.container}>
                <ScrollableTabView
                    onChangeTab={this._onChangeTab}
                    locked={true}
                    scrollWithoutAnimation={true}
                    ref={component => this.scrollTab = component}
                    renderTabBar={() => (
                        <DefaultTabBar
                            ref={component => this.tabBar = component}
                            activeTextColor={"#EA5404"}
                            textStyle={styles.textStyle}
                            renderTab={this._renderTab.bind(this)}
                            markStyle={styles.markStyle}
                            markTextStyle={styles.markTextStyle}
                            underlineStyle={styles.underlineStyle}
                            style={styles.tabBar}
                        />
                    )}>
                    <OwnerList
                        tabLabel="已注册业主"
                        tab={0}
                        parent={this}
                        ref={(component) => this._regListView = component }
                        navigator={this.props.navigator}/>
                    <OwnerListApprove
                        tabLabel="需审核业主"
                        tab={0}
                        parent={this}
                        ref={(component) => this._notApproveListView = component }
                        navigator={this.props.navigator}/>
                </ScrollableTabView>
            </View>
        );
    }
}

var connectHelper = require('../../services/connectHelper');
OwnerInfo = connectHelper(state => state)(OwnerInfo);

module.exports = OwnerInfo;
